<template>
    <view class="vip">
        <view class="vip_header">
                <!-- <view>选择VIP套餐</view>
                <view><input type="text"></view> -->

                <!-- <view class="section__title">选择VIP套餐：</view>
                <picker class="vipicker" bindchange="bindPickerChange" value="{{vipIndex}}" range="{{vipArray}}">

                        div{{vipArray[vipIndex]}}
                </picker> -->

                <view class="taochan_v">
                    <picker bindchange="bindPickerChange" mode='selector' value="{{vipIndex}}" range="{{vipArray}}">
                        <view class="weui-select">{{vipIndex===null ?  '请选择VIP套餐' : vipArray[vipIndex]}}</view>
                    </picker>
                </view>
        </view>
        <!-- <view class="zhifuangshi_v">请 选 择 支 付 方 式</view> -->
        <view class="weixinAndzhifubao">
            <view class="boxfix">
                <view class="iconWis"><i class="iconfont icon-weixinzhifu2"></i></view>
                <text>微信支付</text>
                <view class="xuanze" @tap="payMoney">去付款<image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image></view>
            </view>
            <!-- <view class="boxfix">
                <view class="iconWis"><i class="iconfont icon-zhifubao"></i></view>
                <text>支付宝支付</text>
                <view class="xuanze">
                    <i class="iconfont icon-yuancircle46 xuanze_color_quan"></i>
                    <i class="iconfont icon-dui xuanze_color_dui" style="display: none"></i>
                </view>
            </view> -->
        </view>
        <view class="quanxian">
            VIP特权
            <text>成为VIP后您可以享有鉴定优先权、查看鉴定结果原因、赠送5次鉴定次数。</text>
        </view>
    </view>

</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import utils from '@/utils/utils';
    import tip from '@/utils/tip';
    import {
        USER_INFO, USER_SPECICAL_INFO, USER_ID
    } from '@/utils/constant';

    export default class becomeVip extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '成为VIP'    // 头部标题
        };
        components = {};

        data = {
            avatarUrl: '',
            nickName: '',
            bShowBind: false,
            vipIndex:null,
            vipArray:[],
            vipData:{}
        };

        // 登录获取code
        pay_login(){
            let _this = this;
            wx.login({
              success: function(res) {
                if (res.code) {
                    _this.getmyOpenid(res.code)
                } else {
                    tip.error(res.msg)
                }
              }
            })
        }

        // 获取VIP配置
        async getVipConfig() {
            let self = this;
            const json = await api.getJfPrice({
                query:{}
            })
            if (json.data.code == 0) {
                self.vipData = json.data.data;
                self.vipArray = [json.data.data.vip1+'元/月',json.data.data.vip2+'元/2月']
                self.$apply()
            } else {
                tip.error(json.data.msg);
            }
        }

        // 获取唯一标识openId
        async getmyOpenid(a) {
            let self = this;
            let userId = wepy.getStorageSync(USER_ID) || '';
            const json = await api.getOpenid({
                query:{}
            },'userId='+userId+'&code='+a)
            if (json.data.code == 0) {
                this.createVIP()
            } else {
                tip.error(json.data.msg);
            }
        }

        // 创建VIP支付
        async createVIP() {
            let self = this;
            let myuserId = wepy.getStorageSync(USER_ID);
            let a = self.vipIndex==1 ? 2 : 1;
            api.createVip({
                query:{}
            },'userId='+myuserId+'&vipType='+a).then(function(res){
                if (res.data.code == 0) {
                    self.createPAYVIP(res.data.data.id)
                } else {
                    tip.error(res.data.msg);
                }
            })
        }

        // 创建支付ID
        async createPAYVIP(b) {
            let that = this;
            let myuserId = wepy.getStorageSync(USER_ID);
            api.orderTrade({
                query:{
                    userId:myuserId,
                    orderId:b,
                    orderType:'VIP',
                    payType:'WX_MINI'
                },
                method:'POST'
            }).then(function(res){
                if (res.data.code == 0) {
                    // 微信支付
                    wx.requestPayment({
                        timeStamp: res.data.data.wxpayPamram.timeStamp,
                        nonceStr: res.data.data.wxpayPamram.nonceStr,
                        package: res.data.data.wxpayPamram.package,
                        signType: 'MD5',
                        paySign: res.data.data.wxpayPamram.paySign,
                        success:function(res){
                            tip.toast("支付成功");
                            wepy.switchTab({
                              url: '/pages/personalCenter/me'
                            })
                        },
                        fail:function(res){
                            tip.error('支付失败');
                        }
                    })
                } else {
                    tip.error(res.data.msg);
                }
            })
        }

        onLoad(){
            this.getVipConfig()
        }

        methods = {  // 方法
            bindPickerChange(e){
                this.vipIndex = +e.detail.value;
            },
            payMoney(){
                if(this.vipIndex === null){
                    return tip.toast("请选择VIP套餐",null,"none");
                }
                this.pay_login()
            }
        };
        events = {};
    }

</script>
<style lang="less">
    .vip {
        .vip_header {
            background: #fff;
            border-bottom: 1px solid #dddddd;
            border-top: 1px solid #dddddd;
            width: 100%;
            .taochan_v {
                display: table-cell;
                .weui-select{
                    border-right:0;
                }
                view {
                    display: table-cell;
                    line-height: ~'98rpx';
                    vertical-align: middle;
                }
                .section__title{
                    float: left;
                    width:55% !important;
                    padding-right: 10rpx;
                    box-sizing: border-box;
                }
                view:first-child {
                    width: ~'240rpx';
                    text-align: right;
                }
                view:last-child {
                    width: 66%;
                }
                input {
                    vertical-align: middle;
                    background: #f1f1f1;
                    height: ~'80rpx';
                    color: #666;
                    border-radius: ~'5rpx';
                }
            }
        }
        .zhifuangshi_v {
            margin-top: ~'20rpx';
            background: #fff;
            font-size: ~'28rpx';
            text-align: center;
            height: ~'98rpx';
            color: #333;
            line-height: ~'98rpx';
            border-bottom: 1px solid #dddddd;
        }
        .weixinAndzhifubao {
            margin-top: ~'20rpx';
            background: #fff;
            padding-left: ~'20rpx';
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #ddd;
            .boxfix {
                height: ~'100rpx';
                line-height: ~'100rpx';
                padding-right: ~'30rpx';
                display: flex;
                .iconWis {
                    text-align: center;
                    width: ~'70rpx';
                    .icon-weixinzhifu2 {
                        color: #3cb034;
                    }
                    .icon-zhifubao {
                        color: #108ee9;
                    }
                    i {
                        font-size: 20px;
                    }
                }
                text {
                    margin-right: auto;
                }
                .xuanze {
                    .xuanze_color_quan {
                        color: #333;
                        font-size: 18px;
                    }
                    .xuanze_color_dui {
                        color: orange;
                    }
                    .item_img{
                        margin-left: 20rpx;
                        height: 20rpx;
                        width: 20rpx;
                    }
                }
            }
            text {
                padding-left: ~'20rpx';
                font-size: ~'28rpx';
            }

        }
        .quanxian {
            padding: ~'20rpx';
            font-size: ~'26rpx';
            margin-top: ~'40rpx';
            text {
                display: block;
                margin-top: ~'20rpx';
            }
        }
    }
</style>
